<?php

/* @var $this yii\web\View
 * @var $id integer
 */

use yii\helpers\Url;

$this->title = '用户详情';
?>
<div id="app">
</div>
<? $this->beginBlock('otherJs') ?>
<?= $this->render('/jstemplate/share') ?>
<?= $this->render('/jstemplate/validate') ?>
<?= $this->render('/jstemplate/left_drawer') ?>
<?= $this->render('/jstemplate/notify') ?>
<script type="text/x-template" id="app-template">
    <v-app>
        <notify></notify>
        <left-drawer ref="left_drawer"></left-drawer>

        <v-main>
            <v-app-bar
                elevation="0"
                color="primary"
                dark
                app
            >
                <v-toolbar-title>用户详情</v-toolbar-title>
                <v-spacer></v-spacer>

                <v-app-bar-nav-icon @click="openDrawer"></v-app-bar-nav-icon>
            </v-app-bar>
            <v-container>
                <v-breadcrumbs
                    :items="breadcrumbs"
                    large
                ></v-breadcrumbs>
                <v-card v-if="model != null">
                    <v-container>
                        <v-simple-table>
                            <template v-slot:default>
                                <tbody>
                                <tr>
                                    <th>ID</th>
                                    <td>{{model.id}}</td>
                                </tr>
                                <tr>
                                    <th>头像</th>
                                    <td>
                                        <v-avatar>
                                            <v-img :src="`<?= Url::to('@upload') ?>/${model.head_pic_url_label}`"></v-img>
                                        </v-avatar>
                                    </td>
                                </tr>
                                <tr>
                                    <th>用户名</th>
                                    <td>{{model.username}}</td>
                                </tr>
                                <tr>
                                    <th>登录凭证</th>
                                    <td>{{model.access_token}}</td>
                                </tr>
                                <tr>
                                    <th>昵称</th>
                                    <td>{{model.nickname}}</td>
                                </tr>
                                <tr>
                                    <th>密码</th>
                                    <td>{{model.pwd}}</td>
                                </tr>
                                <tr>
                                    <th>类型</th>
                                    <td>{{model.type_label}}</td>
                                </tr>
                                <tr>
                                    <th>定位</th>
                                    <td>{{ model.gps_country }}{{ model.gps_province }}{{ model.gps_city }}</td>
                                </tr>
                                <tr>
                                    <th>邮箱</th>
                                    <td>{{model.email}}</td>
                                </tr>
                                <tr>
                                    <th>电话</th>
                                    <td>{{ model.phone_code }}{{model.phone}}</td>
                                </tr>
                                <tr>
                                    <th>余额</th>
                                    <td>{{model.balance_label}}</td>
                                </tr>

                                <tr>
                                    <th>创建时间</th>
                                    <td>{{model.create_time}}</td>
                                </tr>
                                <tr>
                                    <th>修改时间</th>
                                    <td>{{model.update_time}}</td>
                                </tr>
                                </tbody>
                            </template>
                        </v-simple-table>
                    </v-container>
                </v-card>
                <v-card v-if="model != null" class="mt-8">
                    <v-card-subtitle>授权信息</v-card-subtitle>
                    <v-container>
                        <v-simple-table>
                            <template v-slot:default>
                                <tbody>
                                <tr>
                                    <th>微信openid</th>
                                    <td>{{model.wx_openid}}</td>
                                </tr>
                                <tr>
                                    <th>微信unionid</th>
                                    <td>{{model.wx_unionid}}</td>
                                </tr>
                                <tr>
                                    <th>qq openid</th>
                                    <td>{{model.qq_openid}}</td>
                                </tr>
                                <tr>
                                    <th>微博 unionid</th>
                                    <td>{{model.weibo_unionid}}</td>
                                </tr>
                                </tbody>
                            </template>
                        </v-simple-table>
                    </v-container>
                </v-card>

                <v-card v-if="model != null" class="mt-8">
                    <v-card-subtitle>社交关系</v-card-subtitle>
                    <v-container>
                        <template v-if="model.parent != null">
                            <v-card-subtitle>上级</v-card-subtitle>
                            <v-card-text>
                                <v-chip :color="model.parent.type_id == 1?'primary':'secondary'">
                                    <v-avatar left>
                                        <v-img :src="'<?= Url::to('@upload') ?>'+model.parent.head_pic_url_label"></v-img>
                                    </v-avatar>
                                    {{ model.parent.nickname }}
                                </v-chip>
                            </v-card-text>
                        </template>

                        <template v-if="model.children.length > 0">
                            <v-card-subtitle>下级</v-card-subtitle>
                            <v-card-text>
                                <v-chip-group column>
                                    <v-chip v-for="child in model.children"
                                            :color="child.type_id == 1?'primary':'secondary'">
                                        <v-avatar left>
                                            <v-img :src="'<?= Url::to('@upload') ?>'+child.head_pic_url_label"></v-img>
                                        </v-avatar>
                                        {{ child.nickname }}
                                    </v-chip>
                                </v-chip-group>

                            </v-card-text>
                        </template>
                    </v-container>
                </v-card>
            </v-container>
        </v-main>
    </v-app>
</script>
<script>
    new Vue({
        el: '#app',
        vuetify: vuetify,
        data: function () {
            const breadcrumbs = [
                {
                    text: '人员',
                    disabled: true,
                    href: 'breadcrumbs_dashboard',
                },
                {
                    text: '用户列表',
                    disabled: false,
                    href: '<?=Url::to(['index'])?>',
                },
                {
                    text: '用户详情',
                    disabled: true,
                    href: 'breadcrumbs_link_1',
                },
            ];

            return {
                model: null,
                breadcrumbs: breadcrumbs,
            }
        },
        mounted() {
            this.refresh();
        },
        computed: {},
        methods: {
            refresh() {
                let vue = this;
                http.get("users/<?=$id?>", {
                    params: {
                        expand: 'parent,children'
                    },
                    paramsSerializer: function(params) {
                        return Qs.stringify(params, {arrayFormat: 'indices'})
                    },
                }).then(function (response) {
                    vue.model = response.data;
                })
            },
            openDrawer() {
                this.$refs.left_drawer.toggleLeftDrawerVisible()
            },
        },
        template: '#app-template'
    })
</script>
<? $this->endBlock() ?>
